<script>
    import bg2 from "$lib/assets/bg-2.png"
</script>

<section id="about">
    <div>
        <img src="{bg2}" alt="" class='bg-blue-l rotate-180'>
    </div>
    
    <div class="bg-blue-l">
        <div class="container max-w-6xl mx-auto p-6">
            <div class="flex flex-col items-center text-justify">
                <h1 class="text-4xl font-dosis uppercase font-semibold text-blue-d"><span class="text-blue-m">Our</span> story</h1>
                <p class='pt-8 text-blue-d text-justify'>
                    We are a vibrant, young, dynamic and multicultural company. Our priority goal is to make clean water accessible to everyone.
                    Customers place their trust in YesWater's ability to solve their water treatment needs, so it is important to return that trust by always exceeding their expectations. The YesWater will never get a second chance to make a good first impression, so the team ensures that they take care of the customer’s needs from the very beginning.
                    Customers renew their commitment every time they pay their bill, and YesWater strives to return that loyalty with superior service, genuine gratitude and a warm smile during every interaction.
                </p>
            </div>

            <div class="pt-8 flex flex-col items-center text-justify">
                <h1 class="text-4xl font-dosis uppercase font-semibold text-blue-d">How we <span class="text-blue-m">work</span></h1>
                <div class="pt-8 flex flex-wrap justify-center">
                    <div class="p-2">
                        <div class="element-10 bg-white w-36 h-36 rounded-full flex justify-center items-center md:w-48 md:h-48">
                            <svg class="w-20 h-20 fill-cyan-600 md:w-30 md:h-30">
                               <use xlink:href="#order"></use>
                            </svg>
                        </div>
                        <h3 class="text-blue-d font-dosis uppercase text-sm text-center pt-2 md:text-base">Make your order <br>on our site</h3>
                    </div>


                    <div class="p-2">
                        <div class="element-10 bg-white w-36 h-36 rounded-full flex justify-center items-center md:w-48 md:h-48">
                            <svg class="w-20 h-20 fill-pink-400 md:w-30 md:h-30">
                               <use xlink:href="#confirm"></use>
                            </svg>
                        </div>
                        <h3 class="text-blue-d font-dosis uppercase text-sm text-center pt-2 md:text-base">We confirm <br>your order</h3>
                    </div>

                    <div class="p-2">
                        <div class="element-10 bg-white w-36 h-36 rounded-full flex justify-center items-center md:w-48 md:h-48">
                            <svg class="w-20 h-20 fill-indigo-500 md:w-30 md:h-30">
                               <use xlink:href="#car"></use>
                            </svg>
                        </div>
                        <h3 class="text-blue-d font-dosis uppercase text-sm text-center pt-2 md:text-base">Our engineer will come <br> to you super fast</h3>
                    </div>


                    <div class="p-2">
                        <div class="element-10 bg-white w-36 h-36 rounded-full flex justify-center items-center md:w-48 md:h-48">
                            <svg class="w-20 h-20 fill-blue-700 md:w-30 md:h-30">
                               <use xlink:href="#filter2"></use>
                            </svg>
                        </div>
                        <h3 class="text-blue-d font-dosis uppercase text-sm text-center pt-2 md:text-base">Installation takes <br> from 30-60 minutes</h3>
                    </div>

                    <div class="p-2">
                        <div class="element-10 bg-white w-36 h-36 rounded-full flex justify-center items-center md:w-48 md:h-48">
                            <svg class="w-20 h-20 fill-sky-400 md:w-30 md:h-30">
                               <use xlink:href="#water"></use>
                            </svg>
                        </div>
                        <h3 class="text-blue-d font-dosis uppercase text-sm text-center pt-2 md:text-base">D😉ne  now you can<br>enjoy clean water <br>every day</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <img src="{bg2}" alt="" class='bg-blue-l'>
    </div>

</section>
